import React from 'react'
import { SchemaForm, Item, Submit, Reset, Layout, SchemaType } from '@amazebird/antd-schema-form'

const schema: SchemaType = {
  baseInfo: {
    type: 'object',
    fields: {
      name: {
        label: '姓名',
        component: 'Input'
      },
      age: {
        label: '年龄',
        component: 'InputNumber',
        props: {
          // controlsPosition: 'right'
        }
      },
      nation: {
        label: '民族',
        component: 'Select',
        options: [{ label: '汉族', value: 1 }, { label: '满族', value: 2 }]
      },
      sex: {
        label: '性别',
        component: 'Radio',
        options: [{ label: '男', value: 1 }, { label: '女', value: 0 }]
      },
      birthday: {
        label: '出生日期',
        component: 'DatePicker'
      }
    }
  },
  score: {
    label: '成绩',
    type: 'object',
    fields: {
      math: {
        label: '数学',
        component: 'InputNumber',
        props: {
          max: 100
        }
      },
      chinese: {
        label: '语文',
        component: 'InputNumber',
        props: {
          max: 100
        }
      },
      english: {
        label: '英语',
        component: 'InputNumber',
        props: {
          max: 100
        }
      }
    }
  }

}

function Base() {
  function onFinish(data) {
    console.info(data)
  }

  return (
    <SchemaForm schema={schema}>
      <Item field="baseInfo">
        <Item field="name" />
        <Item field="age" />
        <Item field="nation" />
        <Item field="sex" />
        <Item field="birthday" />
      </Item>
      <Item field="score">
        <Item field="math" />
        <Item field="chinese" />
        <Item field="english" />
      </Item>
      <Layout offset={8}>
        <Submit onFinish={onFinish} />
      </Layout>
    </SchemaForm>
  )
}

export default Base
